import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:kkhousekeep/page/home/convenient/order/order_taking_controller.dart';
import 'package:kkhousekeep/tools/get_dialog_ext.dart';
import 'package:kkhousekeep/widget/bottom_confirm_bar.dart';

import '../../../../widget/custom_app_bar.dart';
import '../../../../widget/custom_table.dart';

class OrderTakingPage extends StatelessWidget {
  const OrderTakingPage({super.key});

  @override
  Widget build(BuildContext context) {
    return GetBuilder<OrderTakingController>(
      init: OrderTakingController(),
      builder: (controller) => Scaffold(
        backgroundColor: const Color(0xFFf4f5f6),
        appBar: CustomAppBar("接单"),
        body: SafeArea(
          left: false,
          right: false,
          child: Column(
            children: [
              Container(
                margin: EdgeInsets.only(top: 16.h),
                color: Colors.white,
                child: Obx(
                  () => Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      _buildDetail(context, controller),
                      Text(
                        controller.fatalDesc.value,
                        textAlign: TextAlign.left,
                        style: TextStyle(
                            fontSize: 32.sp, color: const Color(0xFF333333)),
                      ).marginOnly(left: 32.w, right: 32.w, bottom: 20.h),
                      buildDescriptionPicture(),
                    ],
                  ),
                ),
              ),
              const Spacer(),
              buildBottomSheet(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildDetail(
      BuildContext buildContext, OrderTakingController controller) {
    return CustomTable(
      children: [
        TableRow(children: [
          CustomTable.buildFormTitle("工单编号"),
          CustomTable.buildFormContent(controller.woSn.value)
              .marginOnly(left: 60.w),
        ]),
        TableRow(children: [
          CustomTable.buildFormTitle("故障类型"),
          CustomTable.buildFormContent(controller.fatalType.value)
              .marginOnly(left: 60.w),
        ]),
        TableRow(children: [
          CustomTable.buildFormTitle("报修地址"),
          CustomTable.buildFormContent(controller.address.value)
              .marginOnly(left: 60.w),
        ]),
        TableRow(children: [
          CustomTable.buildFormTitle("故障描述"),
          Container(),
        ]),
      ],
    );
  }

  buildDescriptionPicture() {
    OrderTakingController controller = Get.find();
    return GridView.builder(
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      padding: EdgeInsets.only(top: 12.h, bottom: 40.h),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 24.h,
        crossAxisSpacing: 24.w,
      ),
      itemCount: controller.descImg.length,
      itemBuilder: (context, index) {
        return buildDescriptionPictureItem(controller.descImg[index]);
      },
    ).marginSymmetric(horizontal: 32.w);
  }

  buildDescriptionPictureItem(String imgUrl) {
    OrderTakingController controller = Get.find();
    return InkWell(
      child: CachedNetworkImage(
        imageUrl: imgUrl,
        imageBuilder: (context, imageProvider) => Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(
              Radius.circular(6.r),
            ),
            image: DecorationImage(
              fit: BoxFit.cover,
              image: imageProvider,
            ),
          ),
        ),
        placeholder: (context, url) => Container(
          color: Colors.grey,
        ),
        errorWidget: (context, url, error) => const Icon(Icons.error),
      ),
      onTap: () {
        if (imgUrl.isNotEmpty) {
          controller.clickImageItem(imgUrl);
        }
      },
    );
  }

  buildBottomSheet() {
    return BottomConfirmBar(
      leftText: "取消",
      onTapLeft: () {
        Get.back();
      },
      rightText: "提交",
      onTapRight: () {
        showConfirmDialog();
      },
    );
  }

  void showConfirmDialog() {
    OrderTakingController controller = Get.find();
    Get.showCupertinoDialog(
      content: '请确认是否接单',
      onRightTap: () {
        controller.takeOrder();
      },
    );
  }
}
